<template>
  <div class="home">
    <div class="header">
      <el-image
        class="logo"
        :src="require('@/assets/logo.jpg')"
        fit="cover"></el-image>
      <el-form :inline="true" :model="formData" class="formBox">
        <el-form-item label="配送城市">
          <el-select v-model="formData.deptId" placeholder="请选择" style="width:100px;" size="small" @change="cityListChange">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.deptName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" v-clickoutside="onClickoutside">
          <el-input v-model="formData.searchText" placeholder="请输入地址" size="small" clearable @input="debounceSearch" @focus="onInputFoucs"></el-input>
          <div class="adressDetailDiv" v-show="addressShow">
            <ul class="adressDetail" v-if="addressList && addressList.length">
              <li class="addressActive" v-for="item in addressList" :key="item.id" @click.stop.prevent="onAddressSelect(item)">
                <p><i class="el-icon-location-information"></i>{{item.name}}</p> 
                <p><i class="el-icon-location-information"></i>{{item.address}}</p> 
                <p>{{item.pname+item.cityname+item.adname}}</p> 
              </li>
            </ul>
            <div class="empty" v-else>
              <el-empty :image-size="100"></el-empty>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="color:red;">提示：请选择您所在城市，输入详细地址查询是否在免费配送范围！</div>
        </el-form-item>
      </el-form>
      <urlTags class="url-tags"></urlTags>
    </div>
    <MapContainer :deptId="formData.deptId" @mousedown="onClickoutside"/>
    <statementDialog ref="statementDialog"></statementDialog>
  </div>
</template>

<script>
import { getDeptList, isRange } from '@/api/api.js'
import MapContainer from '../../components/MapContainer.vue'
import clickoutside from 'element-ui/lib/utils/clickoutside'
import { debounce } from 'lodash'
import { skipShop } from '@/helper/url'
import urlTags from '@/components/urlTags'
import statementDialog from './statementDialog'
export default {
  name: 'Home',
  directives: {
    clickoutside
  },
  data(){
    return{
      formData: {
        cityName:'',
        deptId: '',
        searchText: ''
      },
      cityList: [],
      total: 10,
      page:'',
      addressList: [],
      addressShow: false
    }
  },
  components:{
    MapContainer,
    urlTags,
    statementDialog,
  },
  mounted(){
    this.getDeptList()
  },
  methods:{
    getDeptList(){
      let data = {
        deliveryWay: 2
      }
      getDeptList(data).then(res=>{
        if(res.code == 200) {
          this.cityList = res.data
        }
      })
    },
    cityListChange(e){
      console.log(e)
      for(let i =0; i<this.cityList.length; i++){
        if(this.cityList[i].id == e){
          this.formData.cityName = this.cityList[i].deptName
        }
      }
    },
    onSearch(){
      this.getMapaddress(this.formData.searchText)
    },
    //根据城市获取地图位置
    getMapaddress(searchText) {
      AMap.plugin(["AMap.PlaceSearch"], () => {
        let MSearch = new AMap.PlaceSearch({
          //构造地点查询类
          city: this.formData.cityName, //城市
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          // city: this.formData.deptId, // 兴趣点城市
          extensions: 'all',
          citylimit: true,  //是否强制限制在设置的城市内搜索
          // map: map, // 展现结果的地图实例
          // panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        MSearch.search(searchText,(status, result)=>{
          console.log(result)
          this.addressList = (result.poiList && result.poiList.pois) || []
        }); //关键字查询
      });
    },
    onAddressSelect(item){
      this.addressShow = false
      this.isRange(item)
    },
    //是否在配送范围
    isRange(item){
      const unskip = this.$route.query && this.$route.query.unskip
      // console.log(item)
      let data = {
        location: item.location.lng + ',' + item.location.lat,
        deptId: this.formData.deptId,
        cityName: this.formData.cityName,
      }
      isRange(data).then(res=>{
        //code 200 !=200就是一定不能配送
        if(res.code ==200){
          if(res.data == -1) {
            this.$alert('非常抱歉，您选择的地址不在我们配送范围，敬请期待...', '提示', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            return
          }else if(res.data == 1) {
            this.$alert(`太棒啦，该区域有熊猫跳舞服务哦！${unskip ? '' : '点击立即下单！'}`, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                console.log(action)
                if(action == 'confirm'){
                  !unskip && skipShop()
                }else{}
              }
            });
            return
          }else{
            this.$alert('主人！该地址蛋糕将由第三方配送上门，暂无法提供熊猫上门跳舞服务哦。', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                if(action == 'confirm'){
                  !unskip && skipShop()
                }else{}
              }
            });
            return
          }
        }else{
          this.$alert('非常抱歉，您选择的地址不在我们配送范围，敬请期待...', '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },
    onInputFoucs() {
      this.addressShow = true
    },
    onClickoutside() {
      console.log(1)
      this.addressShow = false
    }
  },
  created() {
    this.debounceSearch = debounce(this.onSearch, 200)
  }
}
</script>

<style lang="scss" scoped>
.home{
  padding: 5PX;
  .logo {
    border-radius: 50%;
    width: 50PX;
    height: 50PX;
    margin-left: 10PX;
  }
}
.header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10PX;
  .url-tags {
    margin-left: 20PX;
  }
}
.formBox{
  height: 40PX;
  margin-left: 20PX;
}
.adressDetailDiv {
  background: #fff;
  position: absolute;
  left: 0;
  border: 1PX solid #dcdfe6;
  z-index: 99;
  .adressDetail {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1PX solid #dcdfe6;
    font-size: 14PX;
    line-height: 24PX;

    li {
      border-bottom: 1PX solid #dcdfe6;
      &:hover {
        background-color: #f5f7fa;
      }

      p {
        margin: 0;
        padding: 0 10PX;
        list-style: none;
        width: 300PX;
        text-align: left;
      }
      p:last-child {
        color: #999;
      }
    }
  }
  .empty {
    width: 300PX;
  }
}
</style>
